<template>
   <li>
     <div class="header_wrap">
       <p @click="set_all_check">
         <b :class="allchecke===true?'active':''"></b>
       </p>

       <i :style="{ backgroundImage: 'url('+data.icon+')'}"></i>
       <span>{{data.title}}</span>
       <div @click="is_full=!is_full">
         <u :class="is_full?'up':''"></u>
       </div>
     </div>
     <item v-show="is_full"
           @get_shop_car="get_shop_car"
           @selectItem="selectItem"
           @set_all_check="set_all_check"
           v-for="(item , index) in data.package_list"
           :data_list="data_list"
           :data="item"
            :key="index"
           :isReload="isReload"
     >
     </item>
     <div class="tatle">
       <p> ¥ {{data.totalPrice}}</p>
     </div>
   </li>
</template>

<script>
  import item from 'components/car_item'
  import {set_shop_check} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
    export default {
        name: "car_item_list",
      props: ['data','data_list','isReload'],
      data(){
          return{
            allchecke:true,
            is_full:true
          }
      },
      created(){
        for(let i=0;i<this.data.package_list.length;i++){ //第一次进来时不会触发$watch('data_list')
          this.data.package_list[i].sign===0&&(this.allchecke=false)
        }
        this.$watch('data_list',function (newVal) {
          if(newVal.resStatus!==0){
            this.data.package_list=[]
          }
          this.allchecke=true;
           for(let i=0;i<this.data.package_list.length;i++){
              this.data.package_list[i].sign===0&&(this.allchecke=false)
            }
        })
      },
      methods:{
        selectItem(id){
          this.$emit('selectItem',id)
        },
        get_shop_car(){
          this.$emit('get_shop_car')
        },
        set_all_check(item,sig){
          let sign=0
          let arr=[]

          if(typeof sig==='number'){
            sign=sig
            arr=item
          }else{
            if(this.allchecke===true){
              sign=0
              this.allchecke=false
            }else{
              sign=1
              this.allchecke=true
            }
            for(let i=0;i<this.data.package_list.length;i++){
              arr.push(this.data.package_list[i].cartid)
            }
          }

          this.$emit('set_all_check',arr,sign)
        },
      }
      ,
      components:{
        item
      }
    }
</script>

<style scoped lang="scss">
   .header_wrap{
     height: 39px;
     background-color: #f0f0f0;
     margin-top: 3px;
     >p{
       float: left;
       width: 50px;
       height: 100%;
       >b{
       float: left;
       margin-left: 20px;
       width: 20px;
       height: 20px;
       margin-top: 9px;
       background-size: 100% 100%;
       border: 1px solid #aaa;
       border-radius: 50%;
     }
       >.active{
         background-image: url('../assets/img/active.png');
         border: none;
       }
     }

     >i{
       float: left;
       width: 25px;
       height: 25px;
       margin-left: 12px;
       background-size: 100% 100%;
       margin-top: 5px;
     }
     >span{
       float: left;
       margin-top: 13px;
       font-size: 14px;
       margin-left: 8px;
       color: #999;
     }
     >div{
       float: left;
       width: 60px;
       height: 39px;
       >u{
         float: left;
         margin-left: 12px;
         width: 20px;
         height: 10px;
         margin-top: 13px;
         background-size: 100% 100%;
         background-image: url('../assets/img/down.png');
       }
       >.up{
         background-image: url('../assets/img/up.png');
       }
     }


   }
  .tatle{
    >p{
     text-align: right;
      padding: 5px 20px;
      font-size: 15px;
      color: #999;
    }
  }
</style>
